<template>
  <div>
    <h2>系统设置</h2>
    <el-divider class="hfy-setdecretion"></el-divider>
    <el-row>
      <el-button type="primary" class="hfy-systemBtn" @click="openBox"
        >编码规则设置</el-button
      >
    </el-row>
    <div v-show="IsShow" class="hfy-system-msgbox">
      <div class="hfy-system-top">
        <h3>编码规则设置</h3>
        <i class="el-icon-close" @click="closeBox"></i>
      </div>
      <div class="hfy-system-content">
        <el-row class="hfy-content-addbtn">
          <el-button type="primary" @click="centerDialogVisible = true"
            >增加编码规则</el-button
          >
        </el-row>
        <el-table :data="codedData" border style="width: 100%">
          <el-table-column label="行号" width="160" align="center">
            <!-- 设置自动生成的行号 -->
            <template slot-scope="scope">{{ scope.$index }}</template>
          </el-table-column>
          <el-table-column
            prop="codingName"
            label="编码名称"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prefix"
            label="编码前缀"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="is_addDate"
            label="中间是否加日期"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="is_addTime"
            label="中间是否加时间"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="serial_num"
            label="流水号"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="start_num"
            label="示例"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="230"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="primary"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="systemDel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 增加编码规则弹框 -->
    <el-dialog
      class="hfy-addbox"
      title="新增编码规则"
      :visible.sync="centerDialogVisible"
      width="80%"
      center
      :show-close="false"
    >
      <div class="hfy-system-dialog">
        <div class="hfy-system-dialog-left">
          <el-form :inline="true" :model="addSystemlist">
            <el-form-item label="编码名称：">
              <el-input v-model="addSystemlist.codingName"></el-input>
            </el-form-item>
            <el-form-item label="示例">
              <el-input :disabled="true" placeholder="asdasdad"></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true">
            <el-form-item label="编码前缀：">
              <el-input v-model="addSystemlist.prefix"></el-input>
            </el-form-item>
            <el-form-item label="中间是否加入日期：">
              <el-radio v-model="addSystemlist.is_addDate" label="0"
                >是</el-radio
              >
              <el-radio v-model="addSystemlist.is_addDate" label="1"
                >否</el-radio
              >
            </el-form-item>
            <el-form-item label="中间是否加入时间：">
              <el-radio v-model="addSystemlist.is_addTime" label="0"
                >是</el-radio
              >
              <el-radio v-model="addSystemlist.is_addTime" label="1"
                >否</el-radio
              >
            </el-form-item>
          </el-form>
          <el-form :inline="true">
            <el-form-item label="流水号位数:">
              <el-select v-model="addSystemlist.serial_num">
                <el-option label="1位" value="1"></el-option>
                <el-option label="2位" value="2"></el-option>
                <el-option label="3位" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流水号起始数：">
              <el-input v-model="addSystemlist.start_num"></el-input>
            </el-form-item>
          </el-form>
          <el-form>
            <el-form-item label="备注：">
              <el-input
                style="width: 300px"
                v-model="addSystemlist.remark"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addMsg">保存</el-button>
            <el-button type="info" @click="centerDialogVisible = false"
              >取消</el-button
            >
          </span>
        </div>
        <div class="hfy-system-dialog-right">
          <p>编码规则设置说明：</p>
          <p>1.编码规则设置适用于所有单据；</p>
          <p>2.系统初始化时，基础单据的编码有默认值；管理员可以进行修改</p>
          <p>3.编码组成公式：前缀+中间段+流水号</p>
          <p>4.前缀为字母、数字组合；</p>
          <p>5.中间段为日期和时间，可以设置只用日期或只用时间；</p>
          <p>6.流水号为数字组成，默认从1开始计数，按单据发生累加数字。</p>
        </div>
      </div>
    </el-dialog>
    <!-- 单个编辑弹框 -->
    <el-dialog
      class="hfy-addbox"
      title="编辑编码规则"
      :visible.sync="searchDialogVisible"
      width="80%"
      center
      :show-close="false"
    >
      <div class="hfy-system-dialog">
        <div class="hfy-system-dialog-left">
          <el-form :inline="true" :model="singleEditObj">
            <el-form-item label="编码名称：">
              <el-input v-model="singleEditObj.codingName"></el-input>
            </el-form-item>
            <el-form-item label="示例">
              <el-input
                :disabled="true"
                placeholder="adasdadasd"
                v-model="singleEditObj.name"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" ref="form" :model="singleEditObj">
            <el-form-item label="编码前缀：">
              <el-input v-model="singleEditObj.prefix"></el-input>
            </el-form-item>
            <el-form-item label="中间是否加入日期：">
              <el-radio v-model="singleEditObj.is_addDate" label="0"
                >是</el-radio
              >
              <el-radio v-model="singleEditObj.is_addDate" label="1"
                >否</el-radio
              >
            </el-form-item>
            <el-form-item label="中间是否加入时间：">
              <el-radio v-model="singleEditObj.is_addTime" label="0"
                >是</el-radio
              >
              <el-radio v-model="singleEditObj.is_addTime" label="1"
                >否</el-radio
              >
            </el-form-item>
          </el-form>
          <el-form :inline="true" ref="form" :model="singleEditObj">
            <el-form-item label="流水号位数:">
              <el-select
                v-model="singleEditObj.serial_num"
                placeholder="请选择"
              >
                <el-option label="1位" value="1位"></el-option>
                <el-option label="2位" value="2位"></el-option>
                <el-option label="3位" value="3位"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流水号起始数：">
              <el-input v-model="singleEditObj.start_num"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="form" :model="singleEditObj">
            <el-form-item label="备注：">
              <el-input
                style="width: 300px"
                v-model="singleEditObj.remark"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editMsg">保存</el-button>
            <el-button type="info" @click="searchDialogVisible = false"
              >取消</el-button
            >
          </span>
        </div>
        <div class="hfy-system-dialog-right">
          <p>编码规则设置说明：</p>
          <p>1.编码规则设置适用于所有单据；</p>
          <p>2.系统初始化时，基础单据的编码有默认值；管理员可以进行修改</p>
          <p>3.编码组成公式：前缀+中间段+流水号</p>
          <p>4.前缀为字母、数字组合；</p>
          <p>5.中间段为日期和时间，可以设置只用日期或只用时间；</p>
          <p>6.流水号为数字组成，默认从1开始计数，按单据发生累加数字。</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSystemList,
  systemDelbyId,
  addsystemMsg,
  singleEditApi,
} from "@/http/systemSettingAPI.js";
export default {
  data() {
    return {
      IsShow: true,
      centerDialogVisible: false,
      searchDialogVisible: false,
      codedData: [],
      radio: "",
      time: "",
      addSystemlist: {
        codingName: "",
        prefix: "",
        is_addDate: "",
        is_addTime: "",
        serial_num: "",
        start_num: "",
        remark: "",
      },
      arr: {},
      singleEditObj: {},
    };
  },
  created() {
    this.getinit();
  },
  methods: {
    //获取列表信息
    getinit() {
      getSystemList()
        .then((res) => {
          this.codedData = res.data.data;
          console.log("获取列表信息成功", res.data);
        })
        .catch((err) => {
          console.log("获取列表信息失败", err);
        });
    },
    // 单个删除
    systemDel(row) {
      let id = row.id + "";
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          systemDelbyId(id)
            .then((res) => {
              this.getinit();
              console.log("删除请求成功", res);
            })
            .catch((err) => {
              console.log("删除请求失败", err);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增
    addMsg() {
      this.arr = this.addSystemlist;
      console.log(this.arr);
      this.$confirm("是否新增编码规则信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.centerDialogVisible = false;
          addsystemMsg(this.arr)
            .then((res) => {
              this.addSystemlist = {};
              this.getinit();
              console.log("新增请求成功", res);
              console.log(this.arr, this.addSystemlist);
            })
            .catch((err) => {
              console.log("新增请求失败", err);
            });
          this.$message({
            type: "success",
            message: "新增成功!",
          });
        })
        .catch(() => {
          this.centerDialogVisible = false;
          this.$message({
            type: "info",
            message: "已取消新增",
          });
        });
    },
    openBox() {
      this.IsShow = true;
    },
    closeBox() {
      this.IsShow = false;
    },
    // 单个编辑
    handleClick(row) {
      console.log(row);
      this.singleEditObj = row;
      this.singleEditObj.is_addDate=String(row.is_addDate)
      this.singleEditObj.is_addTime=String(row.is_addTime)
      this.searchDialogVisible = true;
      console.log(this.singleEditObj);
    },
    editMsg() {
      this.$confirm("请确认是否修改", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.singleEditObj);
          this.searchDialogVisible = false;
          this.singleEditObj.is_addDate=Number(this.singleEditObj.is_addDate)
          this.singleEditObj.is_addTime=Number(this.singleEditObj.is_addTime)
          console.log(this.singleEditObj)
          singleEditApi(this.singleEditObj)
            .then((res) => {
              this.getinit()
              console.log("编辑请求成功", res);
            })
            .catch((err) => {
              console.log("编辑请求失败", err);
            });
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
        })
        .catch(() => {
          this.searchDialogVisible = false;
          this.$message({
            type: "info",
            message: "已取消编辑",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/var";
h2 {
  margin-left: 30px;
}
.hfy-setdecretion {
  margin: 5px 0;
}
.hfy-systemBtn {
  margin-top: 15px;
  margin-left: 30px;
  height: 80px;
}
.hfy-system-msgbox {
  margin-top: 10px;
  .hfy-system-top {
    position: relative;
    background-color: $fu-color1;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    h3 {
      color: $fu-color7;
    }
    .el-icon-close {
      position: absolute;
      right: 20px;
      top: 8px;
      font-size: 30px;
      font-weight: 1000;
    }
  }
  .hfy-system-content {
    padding: 20px 20px 20px 30px;
    width: 100%;
    height: 490px;
    box-shadow: 0 0 4px $fu-color1;
    .hfy-content-addbtn {
      margin-bottom: 20px;
    }
  }
  .hfy-system-dialog {
    position: relative;
  }
}
</style>
<style>
.hfy-system-dialog-right {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 80px;
  right: 30px;
  border: 1px solid black;
  box-sizing: border-box;
}
</style>
